/* ************************** GENERAL ************************** */
:root {
    --primary-black: #1a1818;
    --grey: #4e4b4a75;
    --orange: #EA501C;
    --brown: #D9B184;
    --yellow: #F8B03A;
    --white: #F4F1E9;
    --green: #1D771A;
    --salmon: #fa9d96;
}

/* APPEL DE FONTES */
@font-face {
    font-family:"Daruma Drop";
    src: url(../fonts/DarumadropOne-Regular.ttf);
}
@font-face {
    font-family:"Blinker";
    src: url(../fonts/Blinker-Bold.ttf);
}
@font-face {
    font-family:"Glacial Indifference";
    src: url(../fonts/GlacialIndifference-Regular.otf);
}

a {
    color: inherit;
}

body {
    box-sizing: border-box;    
    color: var(--primary-black);
}

/* GLOBAL */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}
h1 {
    font-family: "Blinker", sans-serif;    
    font-size: 3rem;
    text-decoration: underline 7px var(--orange);    
    padding: 20px 0;
}

h2 {
    font-family: "Blinker", sans-serif;
    font-size: 2.5rem;    
    text-decoration: underline 8px var(--orange);
    margin: 10px 0;
}

p {
    font-family: "Glacial Indifference", sans-serif;
    color: var(--primary-black);
    font-size: 1rem;
}

.titre-daruma {
    font-family: "Daruma Drop", cursive;
}


/* ***** BANDEAUX ***** */
.bandeau {  /* Zoning du bandeau */
    height: 350px;
    width: 100%;
}
.bandeau-img {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height:100%;
}
.bandeau-img-activites {
    background-image: url('../images/banniere-jeux-jouets.jpg');
    background-position: cover;
}
.bandeau-img-jeux-jouets {
    background-image: url('../images/banniere-jeux-jouets.jpg');
    background-position: bottom;
}
.bandeau-img-contact {
    background-image: url('../images/banniere-jeux-jouets.jpg');
    background-position: cover;
}

.bandeau-img-adhesion {
    background-image: url('../images/banniere-jeux-jouets.jpg');
    background-position: cover;
}

.bandeau-img-archives {
    background-image: url('../images/archives-img-banniere_.jpg');
    background-position: center;
}


/* *****_***** NAVBAR *****_***** */
.navbar {
    background-color:#ffe4c4;
}



/* *****_*****_*****_*****_**********_*****_*****_*****_***** */


/*
***
****
******************** ACTIVITES ******************** */

/* VOTRE CODE ICI*/

/* ************************************************************ */



/*
***
****
******************** JEUX JOUETS ******************** */
/* *** VERSION PC TAB - CARTES ***  */
/* Gérer positionnement - Gauche */
.gauche {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.carte-bordure-gauche {
    border-left: 10px solid var(--green);
    border-bottom: 10px solid var(--green);
    border-width: 10px;
}
.image-bordure-gauche {         
    border-right: 10px solid #089c089c;
} 

/* Gérer positionnement - Droite */
.droite {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
}
.carte-bordure-droite {
    border-bottom: 10px solid var(--orange);
    border-right: 10px solid var(--orange);     
    border-width: 10px;
}
.image-bordure-droite {    
    border-left: 10px solid #ea501c9c;
}

/* Surlignement du titre */
.strong-gauche, .strong-droite {
    position: relative;
}
.strong-gauche::before {
    background-color: #089c089c;
}
.strong-droite::before {
    background-color: #ea501c9c;
}
.strong-gauche::before, .strong-droite::before {
    content: "";
    position: absolute;
    width: calc(100%);
    height: 60%;
    left: -2px;
    bottom: 0;
    z-index: -1;
}

/* Stylisation carte jeux */
.contenu-jeux {
    height: 300px;
    max-height: 350px;
    width: 100%;
    margin: 80px auto 50px;
}

/* Texte */
.categorie-titre {
    font-family: "Daruma Drop";
    font-size: 1rem;
    color: var(--orange);
}
.carte-titre {
    font-size: 2rem;
    font-family: "Blinker";
}
.carte-texte {
    height: 370px;
} 

/* Image */ 
.image-conteneur {
    object-fit: contain;
}
.image-conteneur img {
    width:80%;
    height:360px;
} 


/* VERSION MOBILE - CARTES JEUX*/
.affichage-mobile {
    margin: 10px auto 30px;
    padding-top: 10px;
    width: 80%;
    text-align: center;
}

/* Couleur */
.mobile-bordure-orange {
    border-bottom: 10px solid var(--orange);
    border-left: 10px solid var(--orange);
}
.mobile-bordure-vert {
    border-bottom: 10px solid var(--green);
    border-left: 10px solid var(--green);
}

/* Image */
.affichage-mobile img {
    width: 70%;
    height: 250px;
    margin: 10px 0;
}
/* Texte */
.mobile-card-texte {  
    max-height: 510px;
    min-height: 500px;
} 

/* MEDIA QUERIES */
/* Afficher version PC et tablette, cacher version mobile */
@media screen and (min-width: 768px){
    .affichage-pc {
        visibility: visible;
    }
    .affichage-mobile {
        visibility: hidden;
        position: absolute;
        left: -100%;
    }
} 
/* Cacher version PC et tablette */
@media screen and (max-width: 768px) {
    .affichage-pc {
        visibility: hidden;
        position: absolute;
        left: -100%;
    }
    h1, #jeux-jouets-introduction, #jeux-jouets-mobile h2, #jeux-jouets-mobile p, .section-title {
        text-align: center;
    }
    .jouets-carte {
        margin: 0 auto;
        width: 80%;
    }
    
}

/* SECTION JOUETS */
.jouets-carte {
    height: 320px;
    text-align: center;
}

.jouets-carte-titre {
    background-color: var(--grey);
} 

.jouets-carte .carte-texte {
    text-align: left;
}

/* ************************************************************ */



/*
***
****
******************** CONTACT ******************** */

/* VOTRE CODE ICI*/

/* ************************************************************ */



/*
***
****
******************** ADHESION ******************** */

/* VOTRE CODE ICI*/

/* ************************************************************ */



/*
***
****
******************** ARCHIVES ******************** */
#card-img-top {
    object-fit: contain;
}
#card-img-top {
    transition: 0.3s;
}
#card-img-top:hover {
    transform: scale(1.15);
}

/* ************************************************************ */



/*
***
****
******************** FOOTER ******************** */
footer {
    background-color: rgb(247, 247, 247);
}

footer h3 {
    color:#e34e1f;
    font-weight:bold;
}
/* ************************************************************ */